<template>
    <div>
        <!-- 当前组件 要被哪个组件替换 -->
        <button @click='change("list")'>list</button><button @click='change("home")'>home</button>
        <keep-alive :exclude="/^H/">
          <component :is="name" qqq='你好'></component>
        </keep-alive>
        <my-input v-model='val'></my-input>
        <h1>{{val}}</h1>
    </div>
</template>
<script>
// @ is an alias to /src
/* 
  使用动态组件的时候  来回切换时 组件是要被销毁的；若不想让数据销毁
  使用 keep-alive 这个组件把内容包起来
  activated,deactivated这两个钩子函数 时专门为kepp-alive服务的；
  keep-alive 有一个行内属性 include= 字符串(写的都是对应组件的name属性)
  include 只缓存 include 包含的组件
  exclude 除了 exclude包含的组件 其他组件都缓存
  后边可以跟 字符串 逗号隔开； 也可以跟 正则 需要结合 v-bind

  Vue.use(对象或者函数)  若是对象 他会 默认调用对象中的install函数
                        若是函数 则会把这个函数当作install执行
*/
import home from './home'
import list from './list'
import myInput from './myInput'
export default {
    name: 'XXX',
    data() {
        return {
          name:home,
          val:'我 很帅'
        }
    },
    components: {
        // home,list
        'my-input':myInput
    },
    methods: {
      change(type){
        console.log(this.$)
        if(type =='list'){
          this.name = list
        }else{
          this.name = home
        }
      }
    },
}
</script>
<style lang="less">

</style>